<template>
  <div class="swipe">
      <van-swipe
        :autoplay="autoplay"
        indicator-color="yellowgreen"
        :initial-swipe="initialSwipe"
        :width="width"
        :height="height"
        :loop="loop"
        :show-indicators="showIndicators"
      >
        <van-swipe-item v-for="(item, i) in banner"
          :key="keys+i"
          @click="imgPreviewClicked(i)">
          <van-image :src='item' :width="width" :height="height">
            <template v-slot:loading>
              <van-loading type='spinner' size='20' />
            </template>
          </van-image>
        </van-swipe-item>
      </van-swipe>
  </div>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem, ImagePreview, Image, Loading } from 'vant'
Vue.use(Swipe).use(SwipeItem).use(ImagePreview).use(Image).use(Loading)

export default {
  data () {
    return {
      initialSwipe: 0
      // banner: [require('../assets/images/img1.jpg'), require('@/assets/images/img2.jpg'), require('@/assets/images/img3.jpg'), require('@/assets/images/img4.jpg')]
      // banner: [
      //   'https://img.alicdn.com/imgextra/i1/88/O1CN012FcSWb1CWLRGHhwjk_!!88-0-luban.jpg_q100.jpg',
      //   'https://img.alicdn.com/simba/img/TB1o6YOsqL7gK0jSZFBSutZZpXa.jpg',
      //   'https://img.alicdn.com/tps/i4/TB1lUY_v.T1gK0jSZFrSuwNCXXa.jpg',
      //   'https://img.alicdn.com/simba/img/TB1457mo7Y2gK0jSZFgSuw5OFXa.jpg',
      //   'https://img.alicdn.com/imgextra/i2/112/O1CN01z5O8Zo1ChKwfTT4Zs_!!112-0-luban.jpg_q100.jpg'
      // ]
    }
  },
  props: {
    banner: {
      type: Array
    },
    autoplay: {
      type: String,
      default: '3000'
    },
    width: {
      type: String,
      default: '100vw'
    },
    height: {
      type: String,
      default: '4rem'
    },
    loop: {
      type: Boolean,
      default: true
    },
    showIndicators: {
      type: Boolean,
      default: true
    },
    keys: {
      type: String,
      required: true
    }
  },
  methods: {
    imgPreviewClicked (i) {
      ImagePreview({
        images: this.banner,
        closeable: true,
        startPosition: i
      })
    }
  }
}
</script>
